<template>
  <div>
    <div class="breadcrumb">
      <div class="demo-inner-divider">基础用法</div>
      <p>适用于广泛的基础用法，系统拥有超过两级以上的层级结构，用于切换向上任意层级的内容。 </p>
      <e-breadcrumb
        @backBtnClick="backBtnClick"
        :back="true"
        class="breadcrumb-component"
        backDisabled
      >
        <e-breadcrumb-item to="/components/radio" disabled>  一级菜单 </e-breadcrumb-item>
        <e-breadcrumb-item to="/components/Collapse">  二级菜单</e-breadcrumb-item>
        <e-breadcrumb-item>当前位置</e-breadcrumb-item>
      </e-breadcrumb>
      <e-breadcrumb  @backBtnClick="backBtnClick" :back="true" class="breadcrumb-component">
        <e-breadcrumb-item to="/components/radio">  一级菜单</e-breadcrumb-item>
        <e-breadcrumb-item>
          <e-tooltip content="二级菜单太长了哇，好长好长" class="demo-tooltip">
            <a class="long-item" href="/components/Collapse">二级菜单太长了哇，好长好长</a>
          </e-tooltip>
        </e-breadcrumb-item>
        <e-breadcrumb-item>当前位置</e-breadcrumb-item>
      </e-breadcrumb>
    </div>

    <div class="breadcrumb">
      <div class="demo-inner-divider">带图标的</div>
      <e-breadcrumb class="breadcrumb-component">
        <e-breadcrumb-item to="/components/radio" disabled>
          <e-icon type="time" size="18"></e-icon> 一级菜单
        </e-breadcrumb-item>
        <e-breadcrumb-item to="/components/Collapse">
          <e-icon type="move" size="18"></e-icon> 二级菜单
        </e-breadcrumb-item>
        <e-breadcrumb-item>
          <e-icon type="label" size="18"></e-icon> 当前位置
        </e-breadcrumb-item>
      </e-breadcrumb>
    </div>

    <div class="breadcrumb">
      <div class="demo-inner-divider">分隔符</div>
      <e-breadcrumb separator=">">
        <e-breadcrumb-item to="/radio">Home</e-breadcrumb-item>
        <e-breadcrumb-item to="/Collapse">Components</e-breadcrumb-item>
        <e-breadcrumb-item>Breadcrumb</e-breadcrumb-item>
      </e-breadcrumb>
      <e-breadcrumb separator="=>">
        <e-breadcrumb-item to="/radio">Home</e-breadcrumb-item>
        <e-breadcrumb-item to="/Collapse">Components</e-breadcrumb-item>
        <e-breadcrumb-item>Breadcrumb</e-breadcrumb-item>
      </e-breadcrumb>
    </div>

    <breadcrumb-md class="markdown-body"></breadcrumb-md>
  </div>
</template>

<script>
import breadcrumbMd from '../../docs/breadcrumb.md';

export default {
  components: {
    breadcrumbMd
  },
  methods: {
    backBtnClick() {
      // eslint-disable-next-line no-console
      alert("点击返回按钮")
      // 返回跳转逻辑
    }
  }

}
</script>
<style lang="less" scoped>
.breadcrumb {
  margin-bottom: 30px;
}
.breadcrumb-component {
  margin: 20px 0;
  .demo-tooltip {
    vertical-align: middle;
  }
  .long-item {
    width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }
}
</style>
